<div style="margin-right: 8px;">
    <d-row [dJustify]="'around'">
        <d-col [dSpan]="4" style="padding-left: 0;">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable dDropScrollEnhanced [switchWhileCrossEdge]="true"
                [dropScope]="['raw']">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'right'"
                        [content]="'帮助.拖动分类.原始' | translate">
                        <span iconSuffix>原始任务</span>
                    </d-icon>
                </div>
                <div class="card-block">
                    <ul class="list-group drop-el devui-scrollbar" dSortable dDropScrollEnhanced [direction]="'v'"
                        [responseEdgeWidth]="'20px'">
                        <!-- 可以拿区的区域 -->
                        <li dDraggable batchDrag (click)="onBatchSelectRawCheck($event, item)"
                            [batchDragActive]="item['选中']" (batchDragActiveEvent)="onBatchSelectRaw(item)"
                            [enableDragFollow]="true" [ngClass]="{ selected: item['选中'] }" *ngFor="let item of taskList"
                            [dragScope]="'raw'" [dragHandleClass]="'drag-handle'" [dragData]="item"
                            class="list-group-item ">
                            {{ item['数据'] }}
                        </li>
                    </ul>
                </div>
            </div>
        </d-col>

        <d-col [dSpan]="4">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable dDropScrollEnhanced [switchWhileCrossEdge]="true"
                [dropScope]="['raw']" (dropEvent)="onDrop($event,'每天')">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'right'"
                        [content]="'帮助.拖动分类.每天' | translate">
                        <span iconSuffix>每天任务</span>
                    </d-icon>
                </div>
                <div class="card-block">
                    <ul class="list-group drop-el devui-scrollbar" dDropScrollEnhanced [direction]="'v'"
                        [responseEdgeWidth]="'20px'">
                        <!-- 可以拿区的区域 -->
                        <li dDraggable *ngFor="let item of taskListEvery;let i=index;" [dragScope]="'periodic'"
                            [dragHandleClass]="'drag-handle'" [dragData]="item"
                            (dragStartEvent)="onDragStart(taskListEvery,i,'每天')" class="list-group-item ">
                            <span> {{ item['数据']['name'] }}</span>
                            <d-input-number [max]="1" [min]="1" size="sm" [(ngModel)]="item['数据']['executionDay']"
                                class="input-number"></d-input-number>
                        </li>
                    </ul>
                </div>
            </div>
        </d-col>

        <d-col [dSpan]="4">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable dDropScrollEnhanced [switchWhileCrossEdge]="true"
                [dropScope]="['raw']" (dropEvent)="onDrop($event,'每周')">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'right'"
                        [content]="'帮助.拖动分类.每周' | translate">
                        <span iconSuffix>每周任务</span>
                    </d-icon>
                </div>
                <div class="card-block">
                    <ul class="list-group drop-el devui-scrollbar" dDropScrollEnhanced [direction]="'v'"
                        [responseEdgeWidth]="'20px'">
                        <!-- 可以拿区的区域 -->
                        <li dDraggable *ngFor="let item of taskListWeek;let i=index;" [dragScope]="'periodic'"
                            [dragHandleClass]="'drag-handle'" [dragData]="item"
                            (dragStartEvent)="onDragStart(taskListWeek,i,'每周')" class="list-group-item">
                            <span> {{ item['数据']['name'] }}</span>
                            <d-input-number size="sm" [max]="6" [min]="0" [(ngModel)]="item['数据']['executionDay']"
                                class="input-number"
                                (afterValueChanged)="onChangeExecutionDay($event,item['数据'])"></d-input-number>
                        </li>
                    </ul>
                </div>
            </div>
        </d-col>

        <d-col [dSpan]="4">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable dDropScrollEnhanced [switchWhileCrossEdge]="true"
                [dropScope]="['raw']" (dropEvent)="onDrop($event,'每月')">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'right'"
                        [content]="'帮助.拖动分类.每月' | translate">
                        <span iconSuffix>每月任务</span>
                    </d-icon>
                </div>
                <div class="card-block">
                    <ul class="list-group drop-el devui-scrollbar" dDropScrollEnhanced [direction]="'v'"
                        [responseEdgeWidth]="'20px'">
                        <!-- 可以拿区的区域 -->
                        <li dDraggable *ngFor="let item of taskListMonth;let i=index;" [dragScope]="'periodic'"
                            [dragHandleClass]="'drag-handle'" [dragData]="item"
                            (dragStartEvent)="onDragStart(taskListMonth,i,'每月')" class="list-group-item">
                            <span> {{ item['数据']['name'] }}</span>
                            <d-input-number size="sm" [max]="31" [min]="1" [(ngModel)]="item['数据']['executionDay']"
                                class="input-number"
                                (afterValueChanged)="onChangeExecutionDay($event,item['数据'])"></d-input-number>
                        </li>

                    </ul>
                </div>
            </div>

        </d-col>
        <d-col [dSpan]="4">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable dDropScrollEnhanced [switchWhileCrossEdge]="true"
                [dropScope]="['periodic','today']" (dropEvent)="onDropToday($event)" [defaultDropPosition]="'closest'">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'right'"
                        [content]="'帮助.拖动分类.今日' | translate">
                        <span iconSuffix>今日任务</span>
                    </d-icon>
                </div>
                <div class="card-block">
                    <ul class="list-group drop-el devui-scrollbar trash-today" dSortable dDropScrollEnhanced
                        [direction]="'v'" [responseEdgeWidth]="'20px'">
                        <!-- 可以拿区的区域 -->
                        <!-- 可以排序，就是可以在内部上下拖拽 -->
                        <li dDraggable *ngFor="let item of taskListToday;let i=index;" [dragScope]="'today'"
                            [dragHandleClass]="'drag-handle'" [dragData]="item" class="list-group-item ">
                            {{ item['executeInfo']['name'] }}
                            <d-badge class="span-space" [count]="i+1" bgColor="#F2F2F3" textColor="#7A7E87"> </d-badge>
                        </li>

                    </ul>
                </div>
            </div>
        </d-col>

        <d-col [dSpan]="4" style="padding-right: 0;">
            <!-- 可以放置的区域 -->
            <div class="card card-outline-primary mb-3" dDroppable [switchWhileCrossEdge]="true"
                [dropScope]="['periodic','today']" (dropEvent)="onDropDelete($event)">
                <div class="card-header">
                    <d-icon icon="icon-helping" [operable]="true" dTooltip [position]="'left'"
                        [content]="'帮助.拖动分类.删除' | translate">
                        <span iconSuffix>删除任务</span>
                    </d-icon>
                </div>
                <div class="card-block list-group trash-zone" dDraggable>
                    <div class="icon icon-delete"></div>
                    <div class="info">拖这里可以删除它。</div>
                </div>
            </div>
        </d-col>
    </d-row>
</div>